import React, { useEffect, useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import '../../components/Layout.css';

const Layout = ({ children }: { children: React.ReactNode }) => {
    const location = useLocation();
    const [isMenuOpen, setIsMenuOpen] = useState(false);

    const isActive = (path: string) => {
        return location.pathname === path;
    };

    useEffect(() => {
        document.title = '智电馆';
    });

    return (
        <div className="app-layout">
            <header className="app-header">
                <div className="header-container">
                    <div className="header-left">
                        <Link to="/" className="nav-logo">
                            <img src="../imgs/商标1.jpg" alt="智电馆" />
                            <span>智电馆</span>
                        </Link>
                        <nav className="main-nav">
                            <Link
                                to="/"
                                className={`nav-link ${isActive('/') ? 'active' : ''}`}
                            >
                                首页
                            </Link>
                            <Link
                                to="/cart"
                                className={`nav-link ${isActive('/cart') ? 'active' : ''}`}
                            >
                                购物车
                            </Link>
                            <Link
                                to="/orders"
                                className={`nav-link ${isActive('/orders') ? 'active' : ''}`}
                            >
                                我的订单
                            </Link>
                        </nav>
                    </div>
                    <div className="header-right">
                        <div className="user-menu">
                            <button
                                className="menu-toggle"
                                onClick={() => setIsMenuOpen(!isMenuOpen)}
                            >
                                <span className="user-icon">👤</span>
                                <span className="user-name">我的账户</span>
                            </button>
                            {isMenuOpen && (
                                <div className="dropdown-menu">
                                    <Link to="/profile" className="dropdown-item">个人中心</Link>
                                    <Link to="/favorites" className="dropdown-item">我的收藏</Link>
                                    <Link to="/address" className="dropdown-item">收货地址</Link>
                                    <div className="dropdown-divider"></div>
                                    <button className="dropdown-item">退出登录</button>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </header>
            <main className="app-main">
                {children}
            </main>
            <footer className="app-footer">
                <div className="footer-content">
                    <div className="footer-section">
                        <h4>关于我们</h4>
                        <ul>
                            <li><a href="#">公司介绍</a></li>
                            <li><a href="#">加入我们</a></li>
                            <li><a href="#">联系我们</a></li>
                        </ul>
                    </div>
                    <div className="footer-section">
                        <h4>帮助中心</h4>
                        <ul>
                            <li><a href="#">购物指南</a></li>
                            <li><a href="#">支付方式</a></li>
                            <li><a href="#">配送说明</a></li>
                        </ul>
                    </div>
                    <div className="footer-section">
                        <h4>售后服务</h4>
                        <ul>
                            <li><a href="#">退货政策</a></li>
                            <li><a href="#">退货流程</a></li>
                            <li><a href="#">退款说明</a></li>
                        </ul>
                    </div>
                    <div className="footer-section">
                        <h4>关注我们</h4>
                        <div className="social-links">
                            <a href="#" className="social-link">微信</a>
                            <a href="#" className="social-link">微博</a>
                            <a href="#" className="social-link">抖音</a>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    );
};

export default Layout; 